[V0_FILE]typescriptreact:file="components/kokonutui/minimal-shop.tsx" "use client" import { AnimatePresence } from "motion/react" import { useState } from "react" import { ProductGrid } from "./product-grid" import { CartDrawer } from "./cart-drawer" import { ProductModal } from "./product-modal" import { TopBar } from "./top-bar" import { type Product, type CartItem, products } from "./data" export default function MinimalShop() { const [cart, setCart] = useState([]) const [selectedProduct, setSelectedProduct] = useState(null) const [isCartOpen, setIsCartOpen] = useState(false) const [searchQuery, setSearchQuery] = useState("") const addToCart = (product: Product, quantity = 1) => { setCart((prev) => { const exists = prev.find((item) => item.id === product.id) if (exists) { return prev.map((item) => (item.id === product.id ? { ...item, quantity: item.quantity + quantity } : item)) } return [...prev, { ...product, quantity }] }) } const removeFromCart = (productId: string) => { setCart((prev) => prev.filter((item) => item.id !== productId)) } const filteredProducts = products.filter((product) => product.name.toLowerCase().includes(searchQuery.toLowerCase())) return (

setIsCartOpen(true)} onSearch={setSearchQuery} />

{selectedProduct && ( setSelectedProduct(null)} onAddToCart={(product) => { addToCart(product) setSelectedProduct(null) setIsCartOpen(true) }} /> )} {isCartOpen && ( setIsCartOpen(false)} onRemoveFromCart={removeFromCart} /> )}

) } [V0_FILE]typescriptreact:file="components/kokonutui/product-grid.tsx" import { motion } from "motion/react" import type { Product } from "./data" interface ProductGridProps { products: Product[] onProductSelect: (product: Product) => void } export function ProductGrid({ products, onProductSelect }: ProductGridProps) { return (

{products.map((product) => ( onProductSelect(product)} className="group cursor-pointer" whileHover={{ y: -1 }} transition={{ duration: 0.2 }} >

{product.name}

${product.price}

{product.category}

))}

) } [V0_FILE]typescriptreact:file="components/kokonutui/product-modal.tsx" "use client" import { motion } from "motion/react" import { X } from "lucide-react" import { useState } from "react" import type { Product } from "./data" interface ProductModalProps { product: Product onClose: () => void onAddToCart: (product: Product) => void } export function ProductModal({ product, onClose, onAddToCart }: ProductModalProps) { const [quantity, setQuantity] = useState(1) return ( <>

{product.name}

{product.category}

${product.price}

{product.description}

SKU: {product.id}

Stock: Available

) } [V0_FILE]typescriptreact:file="components/kokonutui/cart-drawer.tsx" import { motion } from "motion/react" import { X } from "lucide-react" import type { CartItem } from "./data" interface CartDrawerProps { cart: CartItem[] onClose: () => void onRemoveFromCart: (productId: string) => void } export function CartDrawer({ cart, onClose, onRemoveFromCart }: CartDrawerProps) { const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0) return ( <>

Shopping Cart

{cart.map((item) => (

{item.name}

Qty: {item.quantity}

${item.price * item.quantity}

))}

Total ${total}

) } [V0_FILE]typescriptreact:file="components/kokonutui/data.ts" export interface Product { id: string name: string description: string price: number image: string category: string } export interface CartItem extends Product { quantity: number } export const products: Product[] = [ { id: "p1", name: "Minimal Desk Lamp", description: "A sleek and modern desk lamp with adjustable brightness and color temperature.", price: 89, image: "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Lighting", }, { id: "p2", name: "Ceramic Coffee Set", description: "Handcrafted ceramic coffee set including 4 cups and a matching pour-over dripper.", price: 65, image: "https://images.unsplash.com/photo-1517256064527-09c73fc73e38?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Kitchenware", }, { id: "p3", name: "Linen Throw Pillow", description: "Soft linen throw pillow with minimalist pattern design.", price: 45, image: "https://images.unsplash.com/photo-1579656381226-5fc0f0100c3b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Home Decor", }, { id: "p4", name: "Wooden Wall Clock", description: "Modern wooden wall clock with silent movement.", price: 79, image: "https://images.unsplash.com/photo-1563861826100-9cb868fdbe1c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Home Decor", }, { id: "p5", name: "Concrete Planter", description: "Minimalist concrete planter perfect for succulents.", price: 34, image: "https://images.unsplash.com/photo-1485955900006-10f4d324d411?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Plants", }, { id: "p6", name: "Glass Vase Set", description: "Set of 3 minimalist glass vases in varying sizes.", price: 55, image: "https://images.unsplash.com/photo-1581783898377-1c85bf937427?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Home Decor", }, { id: "p7", name: "Bamboo Organizer", description: "Desk organizer made from sustainable bamboo.", price: 42, image: "https://images.unsplash.com/photo-1591129841117-3adfd313e34f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Office", }, { id: "p9", name: "Marble Coasters", description: "Set of 4 marble coasters with cork backing.", price: 38, image: "https://images.unsplash.com/photo-1616594039964-ae9021a400a0?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Kitchenware", }, { id: "p10", name: "Brass Bookends", description: "Modern geometric brass bookends, set of 2.", price: 68, image: "https://images.unsplash.com/photo-1544457070-4cd773b4d71e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Office", }, { id: "p11", name: "Ceramic Plant Pot", description: "Handmade ceramic plant pot with drainage hole.", price: 48, image: "https://images.unsplash.com/photo-1485955900006-10f4d324d411?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Plants", }, { id: "p12", name: "Wall Mirror", description: "Round wall mirror with minimal metal frame.", price: 120, image: "https://images.unsplash.com/photo-1618220179428-22790b461013?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Home Decor", }, ] [V0_FILE]typescriptreact:file="components/kokonutui/header.tsx" import { Search, ShoppingBag } from "lucide-react" import { Menu } from "lucide-react" interface HeaderProps { cartCount: number onCartOpen: () => void searchQuery: string onSearchChange: (query: string) => void } export function Header({ cartCount, onCartOpen, searchQuery, onSearchChange }: HeaderProps) { return (

Store

onSearchChange(e.target.value)} placeholder="Search products..." className="w-full h-9 pl-9 pr-4 text-sm bg-zinc-100 dark:bg-zinc-900 rounded-full focus:outline-none focus:ring-2 focus:ring-zinc-300 dark:focus:ring-zinc-700" />

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import MinimalShop from "@/components/kokonutui/minimal-shop" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Minimal Shop", description: "A minimalist e-commerce experience", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } @layer utilities { .text-balance { text-wrap: balance; } } [V0_FILE]typescriptreact:file="components/kokonutui/top-bar.tsx" isFixed="true" isQuickEdit="true" "use client" import { Search, ShoppingBag, X } from "lucide-react" import { useState, useEffect, useRef } from "react" import { motion } from "motion/react" import Link from "next/link"; interface TopBarProps { cartItemCount: number onCartClick: () => void onSearch: (query: string) => void } const categories = ["All", "Lighting", "Kitchenware", "Home Decor", "Plants", "Office", "Textiles"] export function TopBar({ cartItemCount, onCartClick, onSearch }: TopBarProps) { const [isSearchOpen, setIsSearchOpen] = useState(false) const [selectedCategory, setSelectedCategory] = useState("All") const [isScrolled, setIsScrolled] = useState(false) const searchInputRef = useRef(null) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Escape") { setIsSearchOpen(false) searchInputRef.current?.blur() } } return (

Shop

{categories.map((category) => ( ))}

onSearch(e.target.value)} onKeyDown={handleKeyPress} /> {isSearchOpen && ( )}

) }

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This